<template>
  <div class="log-detail">
    <el-row :gutter="10">
      <template v-for="item in logConfig" :key="item.prop">
        <el-col :span="item.span">
          <div class="item">
            <span class="label">{{ item.label }}：</span>
            <span class="value">{{ row[item.prop] }}</span>
          </div>
        </el-col>
      </template>
    </el-row>
    <div class="item">
      <span class="label">UA标识：</span>
      <span class="value">{{ row.logUa }}</span>
    </div>
    <div class="content">
      <div class="label">请求参数：</div>
      <JsonViewer :value="row.logParams" boxed sort expanded />
    </div>
    <div class="content">
      <div class="label">响应结果：</div>
      <JsonViewer :value="row.logResult" copyable boxed sort expanded />
    </div>
  </div>
</template>

<script setup lang="ts">
import { JsonViewer } from 'vue3-json-viewer'
import 'vue3-json-viewer/dist/index.css'

interface IProps {
  row: any
}

defineProps<IProps>()
const logConfig = [
  { span: 19, label: '控制层', prop: 'logController' },
  { span: 5, label: '响应时间', prop: 'logTime' },
  { span: 7, label: '请求ip', prop: 'logIp' },
  { span: 12, label: '请求路径', prop: 'logUrl' },
  { span: 5, label: '状态', prop: 'logStatus' },
  { span: 7, label: '请求方式', prop: 'logMethod' },
  { span: 12, label: '创建时间', prop: 'createTime' },
  { span: 5, label: '创建人', prop: 'createdBy' }
]
</script>

<style scoped lang="less">
.log-detail {
  .item {
    line-height: 35px;
    //height: 35px;
  }

  .label {
    font-weight: 700;
  }

  .value {
    color: #5c5e60;
  }

  .content {
    display: flex;
  }
}

.jv-container {
  flex: 1;
}

:deep(.jv-container .jv-code.boxed) {
  max-height: 420px;
}

:deep(.jv-container .jv-code) {
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}

:deep(.jv-container .jv-code.boxed) {
  max-height: 420px;
}

:deep(.jv-container .jv-code) {
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}
</style>
